<template>
  <div class="pd-20">
    <el-button type="primary"
               @click="getList">查 询</el-button>
    <el-button type="primary"
               @click="handleOption('add', null)">新 增</el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="searchParams.pageIndex"
                   :pageSize="searchParams.pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:imageUrl="{row}">
        <el-image style="width: 80px; height: 80px"
                  :src="row.imageUrl"
                  :preview-src-list="[row.imageUrl]">
        </el-image>
      </template>
      <template v-slot:op="{row}">
        <el-button type="primary"
                   @click="handleOption('edit', row)">编 辑</el-button>
        <el-button type="danger"
                   @click="handleOption('del', row)">删 除</el-button>
        <el-button type="info"
                   @click="handleOption('shelf', row)"
                   v-if="row.up === 1">下 架</el-button>
        <el-button type="info"
                   @click="handleOption('shelf', row)"
                   v-if="row.up === 0">上 架</el-button>
      </template>
    </element-table>
    <config-dialog v-if="isShowDialog"
                   :dataObj="dataObj"
                   :visible.sync="isShowDialog"></config-dialog>
  </div>
</template>
<script>
  import elementTable from '@/base/ElementTable.vue'
  import configDialog from './configDialog'
  export default {
    name: 'recommend', // 推荐服务管理
    data () {
      return {
        loading: false,
        isShowDialog: false,
        searchParams: {
          pageIndex: 1,
          pageSize: 20
        },
        pageTotal: 0,
        tableData: [],
        columns: [
          {
            label: '服务种类',
            prop: 'name',
            width: 200,
            // formatter: (row, cellValue) => {
            //   return this.commonFunction.timestampFormat(new Date(row.orderStartTime), 'yyyy-MM-dd hh:mm:ss')
            // }
          }, {
            label: '排序',
            prop: 'sortNum'
          }, {
            label: '状态',
            prop: 'up',
            formatter: (row, cellValue) => {
              if (row.up === 1) return <el-tag type="primary">已上架</el-tag>
              if (row.up === 0) return <el-tag type="danger">已下架</el-tag>
            }
          }, {
            label: '图片',
            prop: 'imageUrl',
            isSlot: true
          }, {
            label: '操作',
            prop: 'op',
            width: 240,
            isSlot: true
          }
        ],
        dataObj: {}
      }
    },
    methods: {
      async getList () {
        this.loading = true
        const { data: res } = await this.post(this.api.patient.getPatientList, { range: 1 })
        if (res.code === '200') {
          this.loading = false
          this.tableData = res.object
          this.pageTotal = res.totalNum
        } else {
          this.$message.error(res.message)
        }

      },
      // 分页
      handleChangePage (page) {
        this.searchParams.pageIndex = page
        this.getList();
      },
      // 操作
      async handleOption (op, row) {
        switch (op) {
          case 'add':
            this.isShowDialog = true
            this.dataObj = null
            break;
          case 'edit':
            this.isShowDialog = true
            this.dataObj = row
            break;
          case 'del':
            this.$confirm('确认删除？')
              .then(async _ => {
                const { data: res } = await this.post(this.api.patient.delService, { serveId: row.id })
                if (res.code === '200') {
                  this.$message.success('删除成功!')
                  this.getList()
                } else {
                  this.$message.error(res.message)
                }
              })
              .catch(_ => { });
            break;
          // 上下架
          case 'shelf':
            let tipTitle = row.up === 0 ? '上架' : '下架'
            this.$confirm(`确认${tipTitle}？`)
              .then(async _ => {
                const { data: res } = await this.post(this.api.patient.setUpOrDown, {
                  serveId: row.id,
                  upOrDown: row.up === 0 ? 1 : 0
                })
                if (res.code === '200') {
                  this.$message.success(`${tipTitle}成功!`)
                  this.getList()
                } else {
                  this.$message.error(res.message)
                }
              })
              .catch(_ => { });
            break;
        }
      }
    },
    created () {
      this.getList()
    },
    components: {
      'element-table': elementTable,
      'config-dialog': configDialog
    }
  }
</script>
<style scoped lang="scss">
</style>